<script setup lang="ts">
import { ref, onMounted, nextTick, onUnmounted, watch, computed } from 'vue'
import { House, Document, Loading, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {useRoute, useRouter} from "vue-router";
import {MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import ajax from "../main.ts";

// 定义评论类型
interface Comment {
  id: number | string
  avatar: string
  name: string
  time: string
  content: string
}

// 定义推荐项目类型
interface RecommendedProject {
  id: number | string
  title: string
  type: 'server' | 'client'
  description: string
  avatar: string
  office: number
}

// 定义面包屑项的类型
interface BreadcrumbItem {
  name: string
  path?: string
  icon: any
  clickable: boolean
}

const route = useRoute()
const router = useRouter()

const breadcrumbs = ref<BreadcrumbItem[]>([
  { name: '首页', path: '/', icon: House, clickable: true },
  { name: (route.query.category as string) || '详情页', icon: Document, clickable: false }
])

// 模拟数据
const projectInfo = ref({
  title: '-',
  type: '-',
  author: '-',
  publishTime: '2024-03-20',
  updateTime: '2024-03-25',
  views: 1024,
  stars: 256,
  githubUrl: '-',
  cloneUrl: '-',
  sshUrl: '-',
  downloadUrl: '-',
  img: '',
  description: '-',
  tags: []
})

// 语言分布数据
const languageStats = ref({
  TypeScript: 65,
  JavaScript: 20,
  CSS: 10,
  HTML: 5
})

// 猜你喜欢数据
const recommendedProjects = ref<RecommendedProject[]>([])

const activeTab = ref('overview')

// 评论相关数据
const comments = ref<Comment[]>([])
const commentForm = ref({
  content: '',
  nickname: ''
})

// 评论分页相关
const commentLoading = ref(false)
const hasMoreComments = ref(true)
const currentCommentPage = ref(1)
const pageSize = ref(10)

// 评论字数限制
const maxCommentLength = 300
const commentLength = computed(() => commentForm.value.content.length)
const isCommentValid = computed(() => {
  const content = commentForm.value.content.trim()
  return content.length > 0 && content.length <= maxCommentLength
})

// 获取评论列表
const getComments = async (page = 1) => {
  if (commentLoading.value) return
  
  try {
    commentLoading.value = true
    const res = await ajax.get('getComments/', {
      params: {
        id: route.query.id,
        page,
        pageSize: pageSize.value
      }
    })
    
    if (res.data.code === 200) {
      const newComments = res.data.data || []
      if (page === 1) {
        comments.value = newComments
      } else {
        comments.value = [...comments.value, ...newComments]
      }
      
      // 判断是否还有更多评论
      hasMoreComments.value = newComments.length === pageSize.value
    } else {
      ElMessage.error(res.data.msg || '获取评论失败')
    }
  } catch (error) {
    ElMessage.error('获取评论失败，请稍后重试')
  } finally {
    commentLoading.value = false
  }
}

// 评论区滚动监听
const commentsObserver = ref<IntersectionObserver | null>(null)
const observeComments = () => {
  if (commentsObserver.value) {
    commentsObserver.value.disconnect()
  }

  commentsObserver.value = new IntersectionObserver((entries) => {
    const [entry] = entries
    if (entry.isIntersecting && !commentLoading.value && hasMoreComments.value) {
      currentCommentPage.value++
      getComments(currentCommentPage.value)
    }
  }, {
    rootMargin: '0px 0px 100px 0px',
    threshold: 0.1
  })

  // 监听加载更多的提示元素
  const loadMoreTrigger = document.querySelector('.load-more-trigger')
  if (loadMoreTrigger && commentsObserver.value) {
    commentsObserver.value.observe(loadMoreTrigger)
  }
}

// 获取项目详情
const getMcpDetail = async () => {
  try {
    const res = await ajax.get(`getMcpDetail/`, {'params': { id: route.query.id }})
    if (res.data.code === 200) {
      const data = res.data.data
      // 更新项目信息
      projectInfo.value = {
        title: data.title,
        type: data.type,
        author: data.author,
        publishTime: data.publishTime,
        updateTime: data.updateTime,
        views: data.views,
        stars: data.stars,
        githubUrl: data.githubUrl,
        cloneUrl: data.cloneUrl,
        sshUrl: data.sshUrl,
        downloadUrl: data.downloadUrl,
        description: data.description,
        tags: data.tags || [],
        img: data.img
      }
      
      // 更新语言分布
      languageStats.value = data.languageStats || {}
      
      // 更新概览和README内容
      overviewContent.value = data.overview || ''
      readmeContent.value = data.readme || ''
      
    } else {
      ElMessage.error(res.data.msg || '获取项目详情失败')
    }
  } catch (error) {
    ElMessage.error('获取项目详情失败，请稍后重试')
  }
}

// 获取猜你喜欢
const getGuessYou = async () => {
  try {
    const res = await ajax.get('guessYou/')
    
    if (res.data.code === 200) {
      recommendedProjects.value = res.data.data || []
    } else {
      ElMessage.error(res.data.msg || '获取推荐项目失败')
    }
  } catch (error) {
    ElMessage.error('获取推荐项目失败，请稍后重试')
  }
}

// 刷新页面数据
const refreshPageData = () => {
  // 重置评论分页
  currentCommentPage.value = 1
  comments.value = []
  hasMoreComments.value = true
  
  // 重新加载所有数据
  getMcpDetail()
  getComments(1)
  getGuessYou()
}

// 监听路由参数变化
watch(
  () => route.query,
  () => {
    refreshPageData()
    // 更新面包屑
    breadcrumbs.value = [
      { name: '首页', path: '/', icon: House, clickable: true },
      { name: (route.query.category as string) || '详情页', icon: Document, clickable: false }
    ]
  },
  { deep: true }
)

onMounted(() => {
  refreshPageData()
  // 在组件挂载后设置观察者
  nextTick(() => {
    observeComments()
  })
})

onUnmounted(() => {
  // 清理观察者
  if (commentsObserver.value) {
    commentsObserver.value.disconnect()
  }
})

const submitComment = async () => {
  if (!commentForm.value.content.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }
  
  if (!isCommentValid.value) {
    ElMessage.warning(`评论内容必须在1-${maxCommentLength}字符之间`)
    return
  }

  try {
    const res = await ajax.post('subComment/', {
      id: route.query.id,
      content: commentForm.value.content.trim(),
      nickname: commentForm.value.nickname.trim()
    })

    if (res.data.code === 200) {
      ElMessage.success('评论发表成功')
      // 清空表单
      commentForm.value.content = ''
      commentForm.value.nickname = ''
      // 重新加载评论列表
      currentCommentPage.value = 1
      comments.value = []
      hasMoreComments.value = true
      getComments(1)
    } else {
      ElMessage.error(res.data.msg || '评论发表失败')
    }
  } catch (error) {
    ElMessage.error('评论发表失败，请稍后重试')
  }
}

// 概览内容
const overviewContent = ref('')
// README内容
const readmeContent = ref('')

// 跳转到项目详情页
const goToProject = (project: RecommendedProject) => {
  router.push({
    name: 'show',
    query: {
      id: project.id,
      category: project.type
    }
  })
}

// 复制文本到剪贴板
const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('复制成功')
  } catch (err) {
    ElMessage.error('复制失败，请手动复制')
  }
}
</script>

<template>
  <div class="show-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
          <template v-if="item.clickable && item.path">
            <router-link 
              :to="item.path" 
              class="breadcrumb-link"
            >
              <el-icon class="breadcrumb-icon"><component :is="item.icon" /></el-icon>
              <span>{{ item.name }}</span>
            </router-link>
          </template>
          <template v-else>
            <div class="breadcrumb-link current-page">
              <el-icon class="breadcrumb-icon"><component :is="item.icon" /></el-icon>
              <span>{{ item.name }}</span>
            </div>
          </template>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-card">
      <div class="project-info">
        <!-- 左侧图片 -->
        <div class="project-image">
          <el-image 
            :src="projectInfo.img"
            fit="cover"
            class="image"
          />
        </div>
        
        <!-- 右侧信息 -->
        <div class="project-details">
          <div class="title-container">
            <img 
              v-if="projectInfo.type === 'server'"
              src="../assets/server.svg"
              alt="Server"
              class="type-icon"
            />
            <img 
              v-else-if="projectInfo.type === 'client'"
              src="../assets/clients.svg"
              alt="Client"
              class="type-icon"
            />
            <h1 class="main-project-title">{{ projectInfo.title }}</h1>
          </div>
          
          <div class="info-row">
            <span class="info-label">作者：</span>
            <span class="info-value">{{ projectInfo.author }}</span>
          </div>
          
          <div class="info-row">
            <span class="info-label">发布时间：</span>
            <span class="info-value">{{ projectInfo.publishTime }}</span>
          </div>
          
          <div class="info-row">
            <span class="info-label">更新时间：</span>
            <span class="info-value">{{ projectInfo.updateTime }}</span>
          </div>
          
          <div class="stats-row">
            <div class="stat-item">
              <span class="emoji">👀</span>
              <span>{{ projectInfo.views }}</span>
            </div>
            <div class="stat-item">
              <span class="emoji">⭐</span>
              <span>{{ projectInfo.stars }}</span>
            </div>
            <a :href="projectInfo.githubUrl" target="_blank" class="github-link" title="在 GitHub 上查看">
              <svg height="24" viewBox="0 0 16 16" width="24" class="github-icon">
                <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
              </svg>
              <span>GitHub</span>
            </a>
            <div class="copy-link" @click="copyToClipboard(projectInfo.cloneUrl)" title="点击复制克隆地址">
              <span class="emoji">📥</span>
              <span>Clone</span>
            </div>
            <div class="copy-link" @click="copyToClipboard(projectInfo.sshUrl)" title="点击复制 SSH 地址">
              <span class="emoji">🔑</span>
              <span>SSH</span>
            </div>
          </div>
          
          <div class="description">
            {{ projectInfo.description }}
          </div>
          
          <div class="tags">
            <el-tag 
              v-for="(tag, index) in projectInfo.tags" 
              :key="index"
              class="tag"
              effect="plain"
              v-if="projectInfo.tags.length > 0"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="main-content">
        <div class="left-content">
          <el-tabs v-model="activeTab" class="content-tabs">
            <el-tab-pane label="概览" name="overview">
              <div class="tab-content">
                <MdPreview :modelValue="overviewContent" class="md-preview"/>
              </div>
            </el-tab-pane>
            <el-tab-pane label="README" name="readme">
              <div class="tab-content">
                <MdPreview :modelValue="readmeContent" class="md-preview"/>
              </div>
            </el-tab-pane>
          </el-tabs>

          <!-- 评论区 -->
          <div class="comments-section">
            <h3 class="comments-title">评论区</h3>
            
            <!-- 评论输入框 -->
            <div class="comment-form">
              <el-input
                v-model="commentForm.content"
                type="textarea"
                :rows="3"
                :maxlength="maxCommentLength"
                show-word-limit
                placeholder="和大家一起来讨论吧..."
                class="comment-input"
              />
              <div class="comment-form-footer">
                <el-input
                  v-model="commentForm.nickname"
                  placeholder="昵称（选填）"
                  class="nickname-input"
                />
                <el-button 
                  type="primary" 
                  @click="submitComment"
                  class="submit-btn"
                  :disabled="!isCommentValid"
                >
                  发表评论
                </el-button>
              </div>
              <div class="comment-tips" :class="{ 'warning': commentLength > maxCommentLength }">
                <span>{{ commentLength }}/{{ maxCommentLength }}</span>
                <span v-if="commentLength > maxCommentLength" class="error-tip">
                  超出字数限制
                </span>
              </div>
            </div>

            <!-- 评论列表 -->
            <div class="comments-list">
              <div 
                v-for="comment in comments" 
                :key="comment.id"
                class="comment-item"
              >
                <el-avatar :size="40" :src="comment.avatar" />
                <div class="comment-content">
                  <div class="comment-header">
                    <span class="comment-name">{{ comment.name }}</span>
                    <span class="comment-time">{{ comment.time }}</span>
                  </div>
                  <div class="comment-text">{{ comment.content }}</div>
                </div>
              </div>
              
              <!-- 加载更多触发器 -->
              <div 
                v-if="hasMoreComments" 
                class="load-more-trigger"
                :class="{ 'loading': commentLoading }"
              >
                <el-icon v-if="commentLoading" class="loading-icon"><Loading /></el-icon>
                <span v-else>加载更多评论...</span>
              </div>
              
              <div v-else-if="comments.length > 0" class="no-more-comments">
                没有更多评论了
              </div>
              
              <div v-else class="no-comments">
                暂无评论，来发表第一条评论吧
              </div>
            </div>
          </div>
        </div>

        <div class="right-content">
          <div class="right-content-wrapper">
            <!-- 下载按钮 -->
            <div class="download-section">
              <a 
                :href="projectInfo.downloadUrl" 
                class="download-button"
                download
                @click="(e) => {
                  if (projectInfo.downloadUrl === '-') {
                    e.preventDefault();
                    ElMessage.warning('暂无可下载文件');
                  }
                }"
              >
                <el-icon class="download-icon"><Download /></el-icon>
                <span>下载项目</span>
              </a>
            </div>

            <!-- 语言分布 -->
            <div class="language-stats">
              <h3>语言分布</h3>
              <div class="language-bars">
                <div 
                  v-for="(percentage, language) in languageStats" 
                  :key="language"
                  class="language-bar"
                >
                  <div class="language-name">{{ language }}</div>
                  <el-progress 
                    :percentage="percentage" 
                    :format="percentage => `${percentage}%`"
                    :stroke-width="8"
                    :show-text="true"
                  />
                </div>
              </div>
            </div>

            <!-- 猜你喜欢 -->
            <div class="recommended-projects">
              <h3>猜你喜欢</h3>
              <div class="project-list">
                <div 
                  v-for="project in recommendedProjects" 
                  :key="project.id"
                  class="project-item"
                  @click="goToProject(project)"
                >
                  <el-avatar :size="72" :src="project.avatar" />
                  <div class="recommended-project-info">
                    <div class="project-title-row">
                      <img 
                        v-if="project.type === 'server'"
                        src="../assets/server.svg"
                        alt="Server"
                        class="type-icon"
                      />
                      <img 
                        v-else-if="project.type === 'client'"
                        src="../assets/clients.svg"
                        alt="Client"
                        class="type-icon"
                      />
                      <span class="project-title">{{ project.title }}</span>
                      <img 
                        v-if="project.office === 1"
                        src="../assets/official.svg"
                        alt="Official"
                        class="official-icon"
                      />
                    </div>
                    <div class="project-description">{{ project.description }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.show-container {
  padding: 24px;
}

.content-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 24px;
  margin-top: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(8px);
}

.project-info {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
}

.project-image {
  flex: 0 0 200px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.title-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.type-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.main-project-title {
  font-size: 26px;
  font-weight: 800;
  color: #333;
  margin: 0;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-label {
  color: #666;
  font-size: 14px;
  min-width: 80px;
}

.info-value {
  color: #333;
  font-size: 14px;
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 14px;
}

.emoji {
  font-size: 16px;
  line-height: 1;
}

.github-link,
.copy-link {
  color: #6366f1;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.1);
  cursor: pointer;
}

.github-link:hover,
.copy-link:hover {
  color: #8b5cf6;
  background: rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

.copy-link:active {
  transform: translateY(0);
}

.github-icon {
  transition: transform 0.3s ease;
}

.github-link:hover .github-icon {
  transform: scale(1.1);
}

.description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .project-info {
    flex-direction: column;
  }
  
  .project-image {
    flex: none;
    width: 100%;
    height: 160px;
  }
  
  .content-card {
    padding: 16px;
  }
}

.breadcrumb-container {
  margin-bottom: 16px;
}

.breadcrumb-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6366f1;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-link:hover {
  color: #8b5cf6;
}

.breadcrumb-link.current-page {
  color: #8b5cf6;
  cursor: default;
}

.breadcrumb-link.current-page:hover {
  color: #8b5cf6;
}

.breadcrumb-icon {
  font-size: 16px;
}

.el-breadcrumb :deep(.el-breadcrumb__separator) {
  color: #8b5cf6;
}

.main-content {
  display: flex;
  gap: 24px;
  margin-top: 32px;
}

.left-content {
  flex: 0 0 70%;
}

.right-content {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
}

.right-content-wrapper {
  position: sticky;
  top: 24px;
}

.content-tabs {
  background: white;
  border-radius: 8px;
  padding: 16px;
}

.content-tabs :deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background: rgba(99, 102, 241, 0.1);
}

.content-tabs :deep(.el-tabs__active-bar) {
  background: #6366f1;
  height: 2px;
}

.content-tabs :deep(.el-tabs__item) {
  font-size: 15px;
  font-weight: 500;
  color: #666;
  padding: 0 16px;
  height: 36px;
  line-height: 36px;
  transition: color 0.2s ease;
}

.content-tabs :deep(.el-tabs__item.is-active) {
  color: #6366f1;
  font-weight: 600;
}

.content-tabs :deep(.el-tabs__item:hover) {
  color: #8b5cf6;
}

.tab-content {
  padding: 16px 0;
}

.tab-content h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.tab-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.language-stats {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.language-bars {
  margin-top: 16px;
}

.language-bar {
  margin-bottom: 12px;
}

.language-bar :deep(.el-progress-bar__outer) {
  background-color: rgba(99, 102, 241, 0.1);
}

.language-bar :deep(.el-progress-bar__inner) {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.language-name {
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

.recommended-projects {
  background: white;
  border-radius: 8px;
  padding: 16px;
}

.project-list {
  margin-top: 16px;
}

.project-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  min-height: 72px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.project-item:hover {
  transform: translateX(4px);
  background: rgba(99, 102, 241, 0.05);
}

.project-item:last-child {
  border-bottom: none;
}

.project-item :deep(.el-avatar) {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  flex-shrink: 0;
}

.recommended-project-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4px 0;
}

.project-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-title-row .type-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.project-description {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
  min-height: 2.8em;
  max-height: 2.8em;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .left-content,
  .right-content {
    flex: none;
    width: 100%;
  }
}

.comments-section {
  margin-top: 32px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.comments-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comments-title::before {
  content: '';
  display: block;
  width: 4px;
  height: 16px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 2px;
}

.comment-form {
  margin-bottom: 32px;
  background: rgba(99, 102, 241, 0.02);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(99, 102, 241, 0.1);
}

.comment-input {
  margin-bottom: 16px;
}

.comment-input :deep(.el-textarea__inner) {
  border-radius: 8px;
  resize: none;
  border: 1px solid rgba(99, 102, 241, 0.2);
  transition: all 0.3s ease;
}

.comment-input :deep(.el-textarea__inner:focus) {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.comment-form-footer {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nickname-input {
  flex: 1;
}

.nickname-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  transition: all 0.3s ease;
  box-shadow: none;
  background: white;
}

.nickname-input :deep(.el-input__wrapper.is-focus) {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.nickname-input :deep(.el-input__inner) {
  border: none;
  padding: 0;
  height: 32px;
  line-height: 32px;
}

.submit-btn {
  border-radius: 8px;
  padding: 8px 24px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border: none;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  transition: all 0.3s ease;
}

.comment-item:hover {
  transform: translateX(4px);
}

.comment-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  padding: 8px 0;
}

.load-more-trigger {
  text-align: center;
  padding: 16px;
  color: #6366f1;
  cursor: pointer;
  transition: all 0.3s ease;
}

.load-more-trigger:hover {
  color: #818cf8;
}

.load-more-trigger.loading {
  cursor: default;
}

.loading-icon {
  animation: rotate 1s linear infinite;
}

.no-more-comments,
.no-comments {
  text-align: center;
  padding: 16px;
  color: #9ca3af;
  font-size: 14px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.comment-tips {
  margin-top: 8px;
  text-align: right;
  font-size: 12px;
  color: #666;
}

.comment-tips.warning {
  color: #f56c6c;
}

.error-tip {
  margin-left: 8px;
  color: #f56c6c;
}

.submit-btn[disabled] {
  background: #a5a6f6;
  cursor: not-allowed;
}

.submit-btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}

.md-preview {
  background: transparent;
}

.md-preview :deep(.md-editor-preview-wrapper) {
  padding: 0;
  background: transparent;
}

.official-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 4px;
}

.download-section {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin-top: 40px;
  width: 100%;
  box-sizing: border-box;
}

.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.9), rgba(139, 92, 246, 0.9));
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  width: 70%;
  min-width: 120px;
}

.download-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
  background: linear-gradient(90deg, rgba(99, 102, 241, 1), rgba(139, 92, 246, 1));
}

.download-button:active {
  transform: translateY(0);
}

.download-icon {
  font-size: 16px;
}
</style>